<ngb-carousel *ngIf="cl.length>0">
  <ng-template ngbSlide >
    <div class="picsum-img-wrapper">
      <img [src]="cl[0].picurl" alt="Random first slide" (click)="onCarouselClick(cl[0].contenturl)">
    </div>
    <div class="carousel-caption">
      <h3>{{cl[0].title}}</h3>
      <p>{{cl[0].discription}}</p>
    </div>
  </ng-template>

  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="cl[1].picurl" alt="Random first slide" (click)="onCarouselClick(cl[1].contenturl)">
    </div>
    <div class="carousel-caption">
      <h3>{{cl[1].title}}</h3>
      <p>{{cl[1].discription}}</p>
    </div>
  </ng-template>


  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="cl[2].picurl" alt="Random first slide" (click)="onCarouselClick(cl[2].contenturl)">
    </div>
    <div class="carousel-caption">
      <h3>{{cl[2].title}}</h3>
      <p>{{cl[2].discription}}</p>
    </div>
  </ng-template>

    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img [src]="cl[3].picurl" alt="Random first slide" (click)="onCarouselClick(cl[3].contenturl)">
      </div>
      <div class="carousel-caption">
        <h3>{{cl[3].title}}</h3>
        <p>{{cl[3].discription}}</p>
      </div>

  </ng-template>

  <ng-template ngbSlide>
    <div class="picsum-img-wrapper">
      <img [src]="cl[4].picurl" alt="Random first slide" (click)="onCarouselClick(cl[4].contenturl)">
    </div>
    <div class="carousel-caption">
      <h3>{{cl[4].title}}</h3>
      <p>{{cl[4].discription}}</p>
    </div>

  </ng-template>



  <!--<ng-template ngbSlide>-->
    <!--<div class="picsum-img-wrapper">-->
      <!--<img [src]="images[1]" alt="Random second slide">-->
    <!--</div>-->
    <!--<div class="carousel-caption">-->
      <!--<h3>Second slide label</h3>-->
      <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>-->
    <!--</div>-->
  <!--</ng-template>  <!--<ng-template ngbSlide>-->
    <!--<div class="picsum-img-wrapper">-->
      <!--<img [src]="images[1]" alt="Random second slide">-->
    <!--</div>-->
    <!--<div class="carousel-caption">-->
      <!--<h3>Second slide label</h3>-->
      <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>-->
    <!--</div>-->
  <!--</ng-template>-->

  <!--<ng-template ngbSlide>-->
    <!--<div class="picsum-img-wrapper">-->
      <!--<img [src]="images[2]" alt="Random third slide">-->
    <!--</div>-->
    <!--<div class="carousel-caption">-->
      <!--<h3>Third slide label</h3>-->
      <!--<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>-->
    <!--</div>-->
  <!--</ng-template>-->



</ngb-carousel>
